<template>
  <div style="background-color: #FFFFFF; padding: 20px;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="任务名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-form-item label="描述" prop="description">
        <el-input v-model="ruleForm.description"></el-input>
      </el-form-item>

      <el-form-item label="执行函数" prop="task">
        <el-select v-model="ruleForm.task" placeholder="请选择执行函数" style="width: 100%;">
          <el-option
            v-for="(item,index) in optionsExeFunc"
            :key="index"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="位置参数" prop="args">
        <el-input v-model="ruleForm.args"></el-input>
      </el-form-item>

      <el-form-item label="关键字参数" prop="kwargs">
        <el-input v-model="ruleForm.kwargs"></el-input>
      </el-form-item>

      <el-form-item label="任务类型">
        <el-select v-model="task_status" placeholder="请选择任务类型" style="width: 100%;">
          <el-option
            v-for="(item,index) in optionsTaskStatus"
            :key="index"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="请选择任务">
        <el-select
          style="width: 100%;"
          v-model="TaskId"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入请选择任务"
          :remote-method="TaskInfo"
          :loading="loading">
          <el-option
            v-for="(item,index) in task_info"
            :key="index"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <!--<el-form-item label="间隔任务" prop="interval">-->
        <!--<el-input v-model="ruleForm.interval"></el-input>-->
      <!--</el-form-item>-->

      <!--<el-form-item label="计划任务" prop="crontab">-->
        <!--<el-input v-model="ruleForm.crontab"></el-input>-->
      <!--</el-form-item>-->

      <!--<el-form-item label="太阳时间任务" prop="solar">-->
        <!--<el-input v-model="ruleForm.solar"></el-input>-->
      <!--</el-form-item>-->

      <el-form-item label="是否启用" prop="enabled">
        <el-switch v-model="ruleForm.enabled">
        </el-switch>
      </el-form-item>

      <el-form-item label="是否一次性" prop="one_off">
        <el-switch v-model="ruleForm.one_off">
        </el-switch>
      </el-form-item>

      <el-form-item label="开始时间" prop="start_time">
        <div class="block">
          <el-date-picker
            v-model="ruleForm.start_time"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="最后执行时间" prop="last_run_at">
        <div class="block">
          <el-date-picker
            v-model="ruleForm.last_run_at"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="到期时间" prop="expires">
        <div class="block">
          <el-date-picker
            v-model="ruleForm.expires"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="修改日期" prop="date_changed">
        <div class="block">
          <el-date-picker
            disabled
            v-model="ruleForm.date_changed"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="消息头" prop="headers">
        <el-input v-model="ruleForm.headers"></el-input>
      </el-form-item>

      <el-form-item label="队列" prop="queue">
        <el-input v-model="ruleForm.queue"></el-input>
      </el-form-item>

      <el-form-item label="交换" prop="exchange">
        <el-input v-model="ruleForm.exchange"></el-input>
      </el-form-item>

      <el-form-item label="路由的关键" prop="routing_key">
        <el-input v-model="ruleForm.routing_key"></el-input>
      </el-form-item>

      <el-form-item label="优先级" prop="priority">
        <el-input v-model="ruleForm.priority"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm()">保存</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
  export default {
    name: 'EditPeriodicTask',
    data() {
      return {

        optionsTimezone: [],  // 存储CommonChoices实际数据的列表
        optionsExeFunc: [],  // 执行函数
        optionsTaskStatus: [], // 任务列表


        EditUrl: this.$http.PeriodicTaskURL,  // get编辑的URL
        EditIdStr: 'task_id',  // 模块id字符串
        pushObjName: 'PeriodicTask',  // 成功后跳转的路由

        task_status: '',  // 任务类型
        old_task_status: '', // 旧的任务类型

        TaskId: [],  // 任务id

        loading: false,
        task_info: [], // 任务列表，获取1000条项目数据

        ruleForm: {
          name: '',//任务的名称
          description: '',//描述
          task: '',// 执行函数
          args: '[]',//位置参数
          kwargs: '{}',//关键字参数
          interval: null,//间隔任务
          crontab: null,//计划任务
          solar: null,//太阳时间任务
          headers: '{}', //消息头
          queue: '',//队列
          exchange: '',//交换
          routing_key: '',//路由的关键
          priority: '',//优先级
          expires: '',//到期
          enabled: false,//是否启用
          one_off: false,//是否一次性
          // total_run_count: '',//运行总数
          start_time: '',//开始时间
          last_run_at: '',//最后执行时间
          date_changed: '',//修改日期
          interval_info: {},
          crontab_info: {},
          solar_info: {},
        },  //
        rules: {
          name: [
            {required: true, message: '请输入任务名称', trigger: 'blur'},
            {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
          ],
          description: [
            {required: false, message: '请输入描述', trigger: 'blur'},
            {min: 0, max: 1000, message: '长度在 0 到 1000 个字符', trigger: 'blur'}
          ],
          task: [
            {required: true, message: '请输入执行函数', trigger: 'blur'},
            {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
          ],
          headers: [
            {required: true, message: '请输入消息头', trigger: 'blur'},
            {min: 1, max: 2000, message: '长度在 1 到 2000 个字符', trigger: 'blur'}
          ],
          args: [
            {required: true, message: '请输入位置参数', trigger: 'blur'},
            {min: 1, max: 2000, message: '长度在 1 到 2000 个字符', trigger: 'blur'}
          ],
          kwargs: [
            {required: true, message: '请输入关键字参数', trigger: 'blur'},
            {min: 1, max: 2000, message: '长度在 1 到 2000 个字符', trigger: 'blur'}
          ],

          enabled: [
            {required: true, message: '是否启用', trigger: 'blur'},
          ],

          interval: [
            {required: false, message: '请输入间隔任务', trigger: 'blur'},
          ],
          crontab: [
            {required: false, message: '请输入计划任务', trigger: 'blur'},
          ],
          solar: [
            {required: false, message: '请输入太阳时间任务', trigger: 'blur'},
          ],
          queue: [
            {required: false, message: '请输入队列', trigger: 'blur'},
            {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
          ],
          exchange: [
            {required: false, message: '请输入交换', trigger: 'blur'},
            {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
          ],
          routing_key: [
            {required: false, message: '路由的关键', trigger: 'blur'},
            {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
          ],
          priority: [
            {required: false, message: '优先级', trigger: 'blur'},
          ],
          expires: [
            {required: false, message: '到期时间', trigger: 'blur'},
          ],
          total_run_count: [
            {required: false, message: '运行总数', trigger: 'blur'},
          ],
          start_time: [
            {required: false, message: '开始时间', trigger: 'blur'},
          ],
          last_run_at: [
            {required: false, message: '最后执行时间', trigger: 'blur'},
          ],
          date_changed: [
            {required: false, message: '修改日期', trigger: 'blur'},
          ],

        },
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      };
    },
    created() {
      this.getEditData();   // get回将要编辑的数据
      this.optionsTimezone = this.getChoices.task.timezone;
      this.optionsExeFunc = this.getChoices.task.exe_func;
      this.optionsTaskStatus = this.getChoices.task.task_status;
    },
    methods: {
      submitForm() {
        // this.ruleForm.timezone = this.ruleForm.timezone_find;
        let fd = [];
        for (let key in this.ruleForm) {
          fd.push(key)
        }
        fd.forEach(key => {
          if (this.ruleForm[key] === "") {
            console.log('删除了' + key);
            delete this.ruleForm[key]
          }
        });
        console.log(this.ruleForm);
        this.$myTool.submitForm(this)
      },

      // get回将要编辑的数据
      getEditData() {
        this.$myTool.getEditData(this)
      },

      editTask(interval, crontab, solar) {
        this.ruleForm.interval = interval;
        this.ruleForm.crontab = crontab;
        this.ruleForm.solar = solar
      },

      TaskInfo(query) {
        let data = {
          interval: this.$http.IntervalURL,
          crontab: this.$http.CrontabScheduleURL,
          solar: this.$http.SolarScheduleURL,
        };
        if (this.task_status) {
          this.$myTool.getObjList(this, data[this.task_status], this.task_info, query)
        }
      },

      //
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    watch: {
      'ruleForm.interval_info': function (value) {
        if (value) {
          this.task_status = 'interval';
          this.TaskId.push(value.id);
          this.task_info.push(value)
        }
      },
      'ruleForm.crontab_info': function (value) {
        if (value) {
          this.task_status = 'crontab';
          this.TaskId.push(value.id);
          this.task_info.push(value)
        }
      },
      'ruleForm.solar_info': function (value) {
        if (value) {
          this.task_status = 'solar';
          this.TaskId.push(value.id);
          this.task_info.push(value)
        }
      },
      task_status: function (value) {
        if (this.old_task_status && this.old_task_status !== value) {
          this.task_info.splice(0, this.task_info.length);
          this.TaskId.splice(0,this.TaskId.length);
        }
        this.old_task_status = value;
        if (value === 'interval') {
          this.editTask(this.ruleForm.interval, null, null);
        } else if (value === 'crontab') {
          this.editTask(null, this.ruleForm.crontab, null);
        } else {
          this.editTask(null, null, this.ruleForm.solar,);
        }
      },
      TaskId:function (value) {
        value = this.$myTool.delLenghtList(1, value, this);
        if (this.task_status === 'interval') {
          this.ruleForm.interval = value[0]
        } else if (this.task_status === 'crontab') {
          this.ruleForm.crontab = value[0]
        } else {
          this.ruleForm.solar = value[0]
        }
      }
    },
    computed: {
      getChoices() {
        return this.$store.state.choicesInfo
      }
    },
  }
</script>
